<template>
  <header class="header" :style="{ background: mobileMenus ? '#fff' : '#000' }">
    <img
      class="menus"
      :class="{ menus2: mobileMenus }"
      :src="
        require(mobileMenus
          ? '~/assets/images/menus2.png'
          : '~/assets/images/menus.png')
      "
      alt=""
      @click="mobileMenus = !mobileMenus"
      v-if="!isMobileSearch"
    />
    <img
      class="logo"
      :src="
        require(mobileMenus
          ? '~/assets/images/logo2.png'
          : '~/assets/images/logo.png')
      "
      alt=""
      @click="goBackIndex"
      v-if="!isMobileSearch"
    />
    <div
      class="search-box"
      :style="{ width: isMobileSearch ? '300px' : '' }"
      v-if="$store.state.isMobile"
    >
      <el-autocomplete
        class="search-mobile"
        ref="autocomplete"
        v-model="searchValue"
        prefix-icon="el-icon-search"
        :fetch-suggestions="querySearch"
        :placeholder="$t('搜索')"
        :debounce="800"
        @select="goSearch"
        :clearable="true"
        @change="goSearch"
      ></el-autocomplete>
    </div>
    <i
      class="icon"
      :class="isMobileSearch ? 'el-icon-close' : 'el-icon-search'"
      @click="isMobileSearch = !isMobileSearch"
      v-if="$store.state.isMobile"
    ></i>
    <div class="mobile-menus" :class="{ 'mobile-menus-show': mobileMenus }">
      <MenusVue @routerClick="routerClick" />
    </div>
    <nav class="menu" :style="{ opacity: isSearch ? '0' : '1' }">
      <NuxtLink
        :to="$i18n.path('')"
        class="link"
        :style="{ color: $route.name == 'index' ? '#2ca2f1' : '' }"
        exact
      >
        {{ $t("首页") }}
      </NuxtLink>
      <div
        class="link"
        @click.stop="$router.push({ path: $i18n.path('productCenter') })"
        :style="{ color: $route.name == 'productCenter' ? '#2ca2f1' : '' }"
      >
        {{ $t("产品中心") }}
        <div class="content">
          <div class="items">
            <div
              class="product-item"
              :class="{ 'product-checked': productItemChecked === index }"
              @mouseenter="productItemChecked = index"
              v-for="(item, index) in goodsTitleList"
              :key="index"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="products" v-if="goodsList.length != 0">
            <div
              class="product-items"
              v-for="item in goodsList[productItemChecked]"
              :key="item.id"
              @click.stop="
                $router.push({
                  path: $i18n.path('productDetail/' + item.id),
                })
              "
            >
              <img class="product-img" :src="item.thumb" alt="" />
              <p class="product-name">{{ item.title }}</p>
            </div>
          </div>
        </div>
      </div>
      <NuxtLink
        :to="$i18n.path('intelligentCleaningSolution')"
        class="link"
        :style="{
          color: $route.name == 'intelligentCleaningSolution' ? '#2ca2f1' : '',
        }"
        exact
      >
        {{ $t("智能清洁解决方案标题") }}
      </NuxtLink>
      <NuxtLink
        :to="$i18n.path('serviceSupport')"
        class="link"
        :style="{
          color: $route.name == 'serviceSupport' ? '#2ca2f1' : '',
        }"
        exact
      >
        {{ $t("服务支持标题") }}
      </NuxtLink>
      <div
        @click.stop="changeAboutUs(0)"
        class="link"
        :style="{
          color: $route.name == 'aboutUs' ? '#2ca2f1' : '',
        }"
      >
        {{ $t("关于我们") }}
        <div class="content">
          <div class="items">
            <div
              class="aboutUs-item"
              :class="{ 'aboutUs-checked': aboutUsItemChecked === 0 }"
              @click.stop="(aboutUsItemChecked = 0), changeAboutUs(0)"
            >
              {{ $t("品牌简介") }}
            </div>
            <div
              class="aboutUs-item"
              :class="{ 'aboutUs-checked': aboutUsItemChecked === 1 }"
              @click.stop="(aboutUsItemChecked = 1), changeAboutUs(1)"
            >
              {{ $t("核心技术") }}
            </div>
            <div
              class="aboutUs-item"
              :class="{ 'aboutUs-checked': aboutUsItemChecked === 2 }"
              @click.stop="(aboutUsItemChecked = 2), changeAboutUs(2)"
            >
              {{ $t("新闻动态") }}
            </div>
            <div
              class="aboutUs-item"
              :class="{ 'aboutUs-checked': aboutUsItemChecked === 3 }"
              @click.stop="(aboutUsItemChecked = 3), changeAboutUs(3)"
            >
              {{ $t("联系我们") }}
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div class="right">
      <el-autocomplete
        class="search"
        ref="autocomplete"
        v-model="searchValue"
        prefix-icon="el-icon-search"
        :fetch-suggestions="querySearch"
        :placeholder="$t('搜索')"
        :style="{ width: isSearch ? '1000rem' : '' }"
        @focus="isSearch = true"
        :debounce="1000"
        @select="goSearch"
        :clearable="true"
        @change="goSearch"
        @clear="$refs.autocomplete.suggestions = []"
      ></el-autocomplete>
      <div class="dianhua-box">
        <img class="dianhua" src="~/assets/images/dianhua.png" alt="" />
        <span>400-8066-598</span>
      </div>
      <a
        :href="
          $i18n.locale === 'cn'
            ? `/en${$route.fullPath}`
            : $route.fullPath.replace(/^\/[^\/]+/, '')
        "
        class="link"
        exact
      >
        中/EN
      </a>
    </div>
    <div
      class="search-floor"
      @click="(isSearch = false), ($refs.autocomplete.suggestions = [])"
      v-if="isSearch"
    ></div>
  </header>
</template>

<script>
import MenusVue from "./Menus.vue";
export default {
  name: "HeaderVue",
  components: {
    MenusVue,
  },
  data() {
    return {
      isSearch: false,
      isMobileSearch: false,
      searchValue: "",
      productItemChecked: 0,
      aboutUsItemChecked: 0,
      mobileMenus: false,
      goodsTitleList: [],
      goodsList: [],
      results: [
        { value: "ePro易豹无线洗地机W1" },
        { value: "随手吸 H1" },
        { value: "ePro易豹无线洗地机W3" },
        { value: "扫地机器人 R1" },
      ],
    };
  },
  watch: {
    isSearch(newVal) {
      if (newVal) {
        //展开输入框时添加监听鼠标滚动
        window.addEventListener("mousewheel", this.mouse);
      } else {
        //关闭输入框时移除监听鼠标滚动
        window.removeEventListener("mousewheel", this.mouse);
      }
    },
  },
  async fetch() {
    const res = await this.$indexApi.getGoodsList();
    // console.log(res.data);
    res.data.forEach((element) => {
      this.goodsList.push(element.list);
    });
    this.goodsTitleList = res.data;
  },
  methods: {
    mouse() {
      this.isSearch = false;
      let input = document.getElementsByTagName("input");
      input[0].blur();
      this.$refs.autocomplete.suggestions = [];
    },
    //返回输入建议
    querySearch(queryString, cb) {
      cb(this.results);
    },
    goSearch(e) {
      if (e || e.value) {
        if (typeof e == "object") {
          this.$router.push({
            path: this.$i18n.path("searchDetail/" + e.value),
          });
        } else if (typeof e == "string") {
          this.$router.push({
            path: this.$i18n.path("searchDetail/" + e),
          });
        }
        setTimeout(() => {
          this.mouse();
        }, 500);
      }
    },
    changeAboutUs(index) {
      this.$router.push({
        path: this.$i18n.path("aboutUs"),
        query: {
          tabs: index,
        },
      });
    },
    goBackIndex() {
      if ($nuxt.$route.path == "/") {
        // location.reload();
      } else {
        this.$router.push({ path: this.$i18n.path("") });
      }
    },
    routerClick(e) {
      if (e) {
        setTimeout(() => {
          this.mobileMenus = false;
        }, 500);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100rem;
  display: flex;
  gap: 75rem;
  align-items: center;
  justify-content: center;
  font-size: 20rem;
  font-weight: 400;
  color: #ffffff;
  transition: all 0.3s;
  background: #000;
  .link {
    color: #fff;
    height: 100%;
    align-items: center;
    display: flex;
    position: relative;
    padding: 0 30rem;
    cursor: pointer;
    .content {
      position: fixed;
      top: 100rem;
      width: 100%;
      left: 0;
      background: #fff;
      display: none;
      cursor: default;
      .items {
        border-top: 1px solid #f5f5f5;
        display: flex;
        gap: 100rem;
        justify-content: center;
        padding: 30rem 0;
        font-size: 20rem;
        font-weight: 600;

        .product-item {
          color: #333333;
          cursor: pointer;
          transition: 0.3s;

          &:hover {
            color: #2ca2f1;
          }
        }
        .aboutUs-item {
          color: #333333;
          cursor: pointer;
          transition: 0.3s;
          &:hover {
            color: #2ca2f1;
          }
        }
        .product-checked {
          color: #2ca2f1;
        }
        .aboutUs-checked {
          color: #2ca2f1;
        }
      }
      .products {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40rem;
        padding: 0 257rem 50rem 257rem;

        .product-items {
          cursor: pointer;
          background: #f2f2f2;
          padding: 23rem 18rem;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 40rem;
          position: relative;

          &:hover {
            .product-img {
              transform: scale(1.2);
            }
          }

          .product-img {
            margin: 0 30rem;
            transition: 0.6s;
            width: 200rem;
            height: 200rem;
          }
          .product-name {
            font-size: 20rem;
            font-weight: 400;
            color: #333333;
            white-space: nowrap;
            margin: 0;
          }
        }
      }
    }
    &:hover {
      color: #2ca2f1;
      &::after {
        content: "";
        width: 70rem;
        height: 2rem;
        background: #333333;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .content {
        display: block;
      }
    }
  }
  .nuxt-link-active {
    &::after {
      content: "";
      width: 70rem;
      height: 2rem;
      background: #333333;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .menus,
  .mobile-menus {
    display: none;
  }
  .logo {
    width: 140rem;
    height: 48rem;
    cursor: pointer;
  }
  .menu {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .right {
    display: flex;
    align-items: center;
    margin-left: 15rem;
    padding-left: 150rem;
    .search {
      width: 170rem;
      height: 40rem;
      position: absolute;
      right: 560rem;
      transition: 0.6s;
      :deep(.el-input__inner) {
        font-size: 16rem;
        border-radius: 40rem;
        height: 40rem;
        line-height: 40rem;
      }
      :deep(.el-input__icon) {
        line-height: 40rem;
        font-size: 16rem;
      }
    }

    .dianhua-box {
      display: flex;
      align-items: center;
      margin: 0 52rem 0 59rem;
      gap: 9rem;
      &:hover {
        animation: shake 800ms ease-in-out;
      }
      @keyframes shake {
        10%,
        90% {
          transform: translate3d(-1px, 0, 0);
        }
        20%,
        80% {
          transform: translate3d(+2px, 0, 0);
        }
        30%,
        70% {
          transform: translate3d(-4px, 0, 0);
        }
        40%,
        60% {
          transform: translate3d(+4px, 0, 0);
        }
        50% {
          transform: translate3d(-4px, 0, 0);
        }
      }

      .dianhua {
        width: 18rem;
        height: 19rem;
      }
    }
  }
}
.search-floor {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 80rem;
  left: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 900px) {
  .header {
    height: 55px;
    .menus {
      display: block;
      width: 17px;
      height: 13px;
      position: absolute;
      left: 21px;
    }
    .menus2 {
      width: 14px;
      height: 14px;
    }
    .icon {
      font-size: 20px;
      position: absolute;
      right: 21px;
      transition: 0.6s;
    }
    .search-box {
      width: 0;
      overflow: hidden;
      transition: 0.6s;
      position: absolute;
      right: 50px;
      .search-mobile {
        width: 300px;
        height: 40px;
        :deep(.el-input__inner) {
          font-size: 16px;
          border-radius: 40px;
          height: 40px;
        }
        :deep(.el-input__icon) {
          line-height: 40px;
          font-size: 16px;
        }
      }
    }

    .mobile-menus {
      position: fixed;
      top: 55px;
      width: 100%;
      height: calc(100vh - 55px);
      background: #fff;
      padding: 18px 0;
      box-sizing: border-box;

      :deep(.el-collapse) {
        border-top: none;
        border-bottom: none;
        .el-collapse-item__wrap {
          border-bottom: none;
          .el-collapse-item__content {
            padding-bottom: 0;
          }
        }
        .no-child {
          .el-collapse-item__wrap {
            display: none !important;
          }
          .el-collapse-item__arrow {
            display: none;
          }
        }
        .el-collapse-item__header {
          border-bottom: none;
          padding: 0 21px;
        }
      }
    }
    .mobile-menus-show {
      display: block;
    }
    .logo {
      width: 72px;
      height: 26px;
    }
    .menu,
    .right {
      display: none;
    }
  }
}
</style>
